<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="40%"
      style="height: auto; margin-top: 30vh !important"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>文件列表</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div v-for="item in fileList" :key="item.id" class="mb-[10px]">
        {{ item.fileName }}
        <el-link type="primary" @click="handleDownload(item.id, item.fileName)" class="ml-[5px]"
          >下载</el-link
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { handleDownload } from "@/utils/main";
const dialogVisible = ref(false);
const fileList = ref([]);
const showList = (files) => {
  dialogVisible.value = true;
  fileList.value = files;
};
defineExpose({ showList });
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-dialog__body) {
  background: #fff;
  padding: 20px;
}
</style>
